<template>
  <div class="guide-index">
    <h3>常规方法示例</h3>
    <el-collapse v-model="activeNames" :accordion="true">
      <el-collapse-item title="1.http请求【已注册全局, 返回promise】  @/api/index.js" name="1">
        <div>this.$http.post(url, data)</div>
        <div>this.$http.get(url, data)</div>
      </el-collapse-item>

      <el-collapse-item title="2.按钮权限配置 【未注册全局, 按需引入, 如果使用频繁可全局注册】 @/directive/permission">
        <div>组件中注册自定义指令 import permission from '@/directive/permission/index.js'</div>
        <div>使用 directives: { permission }</div>
        <div>按钮添加v-permission="['201908211524']"</div>
      </el-collapse-item>

      <el-collapse-item title="3. 公共方法使用【已注册全局】  @/utils/index.js">
        <div v-for="(item, index) in validates" :key="index">
          <span>【{{ item.title }}】</span>
          <p>{{ item.content }}</p>
        </div>
      </el-collapse-item>

      <el-collapse-item title="4. 公共验证使用【已注册全局, 返回true或者false】 @/utils/invailate">
        <div v-for="(item, index) in utils" :key="index">
          <span>【{{ item.title }}】</span>
          <p>{{ item.content }}</p>
        </div>
      </el-collapse-item>

      <el-collapse-item title="5. 公共filter使用【已注册全局】 @/filter/index.js">
        <div>常规页直接添加路由编写组件页即可</div>
        <div>动态路由添加动态路由后需要配置后台menuList的接口返回才可正常显示</div>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>

export default {
  data() {
    return {
      activeNames: ['1'],
      utils: [
        { title: '日期格式转化', content: 'this.$utils.parseTime(time, [opition]) ' },
        { title: '刚刚/**分钟前/**小时前/**天前/*日期', content: 'this.$utils.formatTime(time, [opition])' },
        { title: '获取url的参数', content: 'this.$utils.formatTime(time, [opition])' },
        { title: '克隆数组或对象', content: 'this.$utils.param2Obj(url) ' },
        { title: '将指定的代码对象解析出key数组', content: 'this.$utils.deepClone(source) ' },
        { title: '根据key翻译对应的值', content: 'this.$utils.getCodeMapValueForKey(codeObject, key)' },
        { title: '根据file,key翻译对应的值', content: 'this.$utils.getValueForFieldKey(codeMap, field, key)' }
      ],
      validates: [
        { title: '是否外部链接', content: 'isExternal(path)' },
        { title: '是否邮箱', content: 'isEmail(email)' },
        { title: '是否电话号码', content: 'isMobile(mobile)' },
        { title: '是否身份证', content: 'isCardId(cardid)' },
        { title: '是否有效用户名(4-16位字符组合)', content: 'isUserName(username)' },
        { title: '是否有效密码(6-20位字符组合)', content: 'isPasswd(pwd)' },
        { title: '是否邮政编码', content: 'isPostalCode(s)' }
      ]
    }
  },
  mounted() {
    console.log('时间格式转化1：' + this.$utils.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'))
    console.log('时间格式转化2：' + this.$utils.formatTime('1558855552', '{y}-{m}-{d}'))
    console.log('获取url参数 ', this.$utils.param2Obj('http://abc.com/#/guide/index?abc=456&id=789'))
  },
  methods: {

  }
}
</script>

<style lang="scss">
.guide-index {
  padding:0 30px;

  .el-collapse-item__header {
    font-size:16px;  padding-left:20px;
    &.is-active { }
  }

  .el-collapse-item__content {
    padding-left:20px;  font-size: 14px; line-height: 2.4em;
    span { width:300px; display: inline-block;}
    p { display: inline-block; }
  }
}
</style>
